Day 15：JavaScript 的模組化開發

16th鐵人賽

tsou3636

2024-10-08 16:41:41

77 瀏覽

分享至

什麼是模組化開發？

在軟體開發中，模組化是指將程式碼拆分成獨立的、可重用的模組，這樣可以讓每個模組專注於一個單一的功能。這樣不僅使程式碼更具結構性，也能避免不同部分的程式碼互相干擾。

在 JavaScript 中，我們可以使用模組來組織程式碼，使得每個檔案負責一個特定的功能或邏輯。

傳統的模組化方式：IIFE
在 ES6（ECMAScript 2015）之前，JavaScript 並沒有內建的模組化系統。開發者經常使用 IIFE（立即執行的函數表達式）來模擬模組化。

範例：IIFE 模擬模組化

const myModule = (function() {
    const privateVar = "我是私有變數";

    function privateFunction() {
        console.log(privateVar);
    }

    return {
        publicFunction: function() {
            privateFunction();
        }
    };
})();

myModule.publicFunction();  // "我是私有變數"

在這個範例中，privateVar 和 privateFunction 是模組的私有成員，外部無法直接訪問它們。通過 publicFunction，我們可以訪問到模組內部的邏輯。

現代的模組化方式：ES6 模組
在 ES6 之後，JavaScript 引入了原生的模組系統，讓我們可以使用 import 和 export 關鍵字來實現模組化。這是目前最常用的模組化方式，並且已經被主流瀏覽器所支持。

使用 export 來定義模組
可以將模組中的變數、函數或類別導出，這樣其他模組就可以使用它們。

// math.js - 定義一個數學模組
export function add(a, b) {
    return a + b;
}

export const PI = 3.14159;

使用 import 來導入模組
在另一個檔案中，我們可以使用 import 來導入模組中導出的內容。

// app.js - 導入並使用數學模組
import { add, PI } from './math.js';

console.log(add(2, 3));  // 5
console.log(PI);  // 3.14159

這種模組化方式讓開發者可以將邏輯拆分到不同檔案中，並根據需要進行導入。

實際應用：拆分檔案與重用模組
模組化開發非常適合大型專案。以下是一個簡單範例，展示如何將不同功能分拆到不同的模組中，並在主程式中進行整合。

模組 1：math.js

export function add(a, b) {
    return a + b;
}

export function multiply(a, b) {
    return a * b;
}

模組 2：string.js

export function toUpperCase(str) {
    return str.toUpperCase();
}

export function toLowerCase(str) {
    return str.toLowerCase();
}

主程式：app.js

import { add, multiply } from './math.js';
import { toUpperCase, toLowerCase } from './string.js';

console.log(add(2, 3));  // 5
console.log(multiply(4, 5));  // 20
console.log(toUpperCase("hello"));  // "HELLO"
console.log(toLowerCase("WORLD"));  // "world"

這種模組化的開發方式讓專案結構更清晰，並且每個模組可以獨立測試和維護，這對於大型應用程式非常有用。

模組打包工具：Webpack 與其他工具
在實際開發中，通常會使用打包工具如 Webpack 來將多個模組整合成一個檔案，這樣可以提高網站的加載速度。

Webpack 會掃描程式中的 import 和 export，並將所有的模組打包成一個或多個 JavaScript 檔案，供瀏覽器使用。這樣，即使有多個模組，瀏覽器只需載入少量的檔案。